<template>
	<div class="lead-tracker">
		<!--顶部-->
		<div class="top_box">
			<div class="top_serach_box">
				<div class="search_box">
					<van-search v-model="corpName" show-action placeholder="客户名称或客户号">
						<template #action>
							<div @click="onSearch">搜索</div>
						</template>
					</van-search>
				</div>
				<div class="search_right" @click="addBtnClick">添加</div>
			</div>
			<div class="top_btn_box">
				<div class="top_btn_box_left" @click="showDate = true">
					<div class="top_btn_box_left_time">
						<div class="zoufangdate" @click="startTimeclick">
							<van-icon name="notes-o" size="14" />
							<div>{{ startTime }}</div>
							<!-- <van-icon name="arrow" /> -->
						</div>
					</div>
					至
					<div class="top_btn_box_left_tag">
						<div class="zoufangdate" @click="startTimeclick">
							<van-icon name="notes-o" size="14" />
							<div>{{ endTime }}</div>
						</div>
					</div>
					<van-icon name="close" style="font-size: 18px" @click.stop="clearTime" />
				</div>
				<div class="top_btn_box_right zoufangdate" @click.stop="showPicker = true">
					<van-icon name="points" />
					<p :style="{ 'font-size': '12px' }">{{ matterType }}</p>
					<div :style="{ 'font-size': '12px' }">
						<van-icon name="arrow" />
					</div>
				</div>
			</div>
		</div>
		<!--滑动区域-->
		<div ref="mescroll" class="mescroll">
			<leadTrackerList
				v-for="(item, index) in newArr"
				:key="index"
				:info="item"
				@infoClick="infoClick"
			></leadTrackerList>
		</div>
		<!-- 日期选择器 -->
		<van-calendar
			v-model="showDate"
			:default-date="defaultDate"
			:min-date="minDate"
			:max-date="maxDate"
			type="range"
			color="#1989fa"
			@confirm="onConfirm"
		/>
		<!-- 选择器 -->
		<van-popup v-model="showPicker" round position="bottom">
			<van-picker
				show-toolbar
				:columns="columns"
				@cancel="showPicker = false"
				@confirm="onConfirmPicker"
			/>
		</van-popup>
	</div>
</template>
<script>
	import { getSaleLedgerList } from '@/interfaces/marketingExtension';
	import leadTrackerList from '@/components/marketingExtension/leadTrackerList.vue';
	import MeScroll from 'mescroll.js';
	import 'mescroll.js/mescroll.min.css';
	export default {
		name: 'lead-tracker',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: { leadTrackerList },
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				mescroll: null,
				minDate: new Date(2020, 1, 1),
				maxDate: new Date(),
				newArr: [], // 数据列表
				startTime: '开始时间', // 开始时间
				endTime: '结束时间', // 结束时间
				matterType: '全部', // 下拉选项
				matterTypeIndex: '0', // 下拉选项的key值
				corpName: '', // 搜索内容
				meetItems: '',
				// userId: 'f3d8837b895c421191cb2a456ed45f80', // 查询的用户id
				userId: '', // 查询的用户id
				showDate: false,
				showPicker: false,
				columns: ['全部', '陌生拜访', '日常维护', '授信营销', '贷后维护', '其他事项'],
				defaultDate: [],
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {
			// this.userId = this.$route.query.userId || '';
			this.userId = this.$route.query.userId || 'c3f8e202670f41cdb9d6b0a4db79fa15';
			this.startDate = this.$route.query.startDate || '';
			this.endDate = this.$route.query.endDate || '';
			if (this.startDate) {
				this.defaultDate = [new Date(this.startDate), new Date(this.endDate)];
			}
		},
		mounted() {
			// 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescroll
			this.mescroll = new MeScroll(this.$refs.mescroll, {
				// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
				// down: {
				// 	auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
				// 	callback: this.downCallback, // 下拉刷新的回调
				// },
				up: {
					auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
					callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
					page: {
						num: 0, // 当前页码,默认1,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
					},
					noMoreSize: 5000, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					// toTop: {
					// 	// 配置回到顶部按钮
					// 	src: require('../../assets/imgs/marketingExtension/go_top.svg'),
					// 	offset: 1000,
					// },
				},
			});
		},
		beforeDestroy() {
		},
		/* 5. Vue方法 */
		methods: {
			onConfirmPicker(value) {
				switch (value) {
					case '全部':
						this.matterTypeIndex = '';
						break;
					case '陌生拜访':
						this.matterTypeIndex = '1';
						break;
					case '日常维护':
						this.matterTypeIndex = '2';
						break;
					case '授信营销':
						this.matterTypeIndex = '3';
						break;
					case '贷后维护':
						this.matterTypeIndex = '4';
						break;
					case '其他事项':
						this.matterTypeIndex = '5';
						break;
					default:
						break;
				}
				this.matterType = value;
				this.showPicker = false;
				this.mescroll.resetUpScroll();
			},
			infoClick(item) {
				this.$router.push({
					name: 'register',
					query: {
						recordId: item.recordId,
					},
				});
			},
			onConfirm(date) {
				const [start, end] = date;
				this.startTime = this.$dayjs(start).format('YYYY-MM-DD'); // 开始时间
				this.endTime = this.$dayjs(end).format('YYYY-MM-DD'); // 结束时间
				this.showDate = false;
				this.mescroll.resetUpScroll();
			},
			clearTime() {
				this.startTime = '开始时间';
				this.endTime = '结束时间';
				this.mescroll.resetUpScroll();
			},
			onSearch() {
				this.mescroll.resetUpScroll();
			},
			addBtnClick() {
				this.$router.push({
					name: 'register',
				});
			},
			startTimeclick() {},
			matterTypeClick() {},
			/* 下拉刷新的回调 */
			downCallback() {
				console.log('自动下拉刷新 ');
				// console.log('this.mescroll.version=' + this.mescroll.version);
				// 联网加载数据
				this.getListDataFromNet(
					1,
					10,
					(data) => {
						console.log(data, 'data');
						this.newArr = data;
						// 数据渲染成功后,隐藏下拉刷新的状态
						this.$nextTick(() => {
							this.mescroll.endSuccess(0); // 结束下拉刷新,无参
						});
					},
					() => {
						// 联网失败的回调,隐藏下拉刷新的状态
						this.mescroll.endErr();
					}
				);
			},

			// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			upCallback(page) {
				console.log('自动上拉记载');
				// 联网加载数据
				this.getListDataFromNet(
					page.num,
					page.size,
					(curPageData) => {
						// 添加列表数据
						if (page.num == 1) {
							this.newArr = curPageData;
						} else {
							this.newArr = this.newArr.concat(curPageData);
						}
						// 数据渲染成功后,隐藏下拉刷新的状态
						this.$nextTick(() => {
							this.mescroll.endSuccess(curPageData.length);
						});
					},
					() => {
						// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
						this.mescroll.endErr();
					}
				);
			},

			async getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
				if (pageNum === 0) {
					// 下拉刷新返回的数据
					const params = {
						corpName: this.corpName,
						startTime: this.startTime === '开始时间' ? '' : this.startTime,
						endTime: this.endTime === '结束时间' ? '' : this.endTime,
						meetItems: this.matterTypeIndex == 0 ? '' : this.matterTypeIndex * 1,
						pageBO: {
							pageNum: pageNum,
							pageSize: pageSize,
						},
						userId: this.userId,
					};
					console.log(params, 'params');
					const res = await getSaleLedgerList(params);
					console.log(res, '下拉刷新返回的数据');
					successCallback && successCallback(res.data.list);
				} else {
					// 上拉加载返回的数据
					const params = {
						corpName: this.corpName,
						startTime: this.startTime === '开始时间' ? '' : this.startTime,
						endTime: this.endTime === '结束时间' ? '' : this.endTime,
						meetItems: this.matterTypeIndex == 0 ? '' : this.matterTypeIndex * 1,
						pageBO: {
							pageNum: pageNum,
							pageSize: pageSize,
						},
						userId: this.userId,
					};
					console.log(params, 'params');
					const res = await getSaleLedgerList(params);
					console.log(res, '上拉加载返回的数据');
					successCallback && successCallback(res.data.list);
				}
			},
		},
	};
</script>
<style>
	.mescroll-upwarp {
		display: none !important;
	}
</style>
<style scoped lang="scss">
	.lead-tracker {
		overflow: hidden;
	}
	.mescroll {
		// position: relative;
		// height: 100vh;
		// padding-top: 110px;
		position: fixed;
		top: 110px;
		bottom: 0;
		height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
		// position: absolute;
		// top: 104px;
		// bottom: 0px;
		// left: 0px;
		// right: 0px;
		// bottom: 0px;
		// border: 1px solid red;
		overflow-x: hidden;
	}
	.top_box {
		background-color: #fff;
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 104px;
		padding-bottom: 6px;
		box-shadow: 0px 10px 9px -6px rgba(0, 0, 0, 0.18);
		// border: 1px solid red;
		.top_serach_box {
			margin: 0 auto;
			border-radius: 4px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 10px;
			.search_box {
				background: #fff;
				width: 80%;
				border-radius: 12px;
				background: #f7f8fa;
				margin-right: 10px;
				/* border: 1px solid red; */
			}
			.search_right {
				width: 20%;
				height: 30px;
				background: #4b8fe4;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				font-family: Source Han Sans SC;
				font-weight: 400;
				color: #ffffff;
			}

			.van-search {
				// padding: 0 !important;
			}
		}
		.top_btn_box {
			// border: 1px solid red;
			width: 95%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 13px;
			padding: 0;

			.top_btn_box_left {
				width: 70%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #767676;
				background-color: #f6f6f6;
				border-radius: 6px;
				padding: 0 10px;
				height: 40px;
				// border: 1px solid red;
			}

			.top_btn_box_left_time {
				padding: 10px 0;
				flex: 1;
				.zoufangdate {
					flex: 1;
					// border: 1px solid red;
					height: 20px;
					justify-content: center;
					display: flex;
					align-items: center;
					& > div {
						// flex: 1;
						margin-left: 4px;
						font-size: 12px;
					}
				}
			}

			.top_btn_box_left_tag {
				background-color: #f6f6f6;
				// padding: 10px 0;
				flex: 1;
				align-content: center;
				justify-content: center;
				.zoufangdate {
					flex: 1;
					// border: 1px solid red;
					height: 20px;
					justify-content: center;
					display: flex;
					align-items: center;
					& > div {
						// flex: 1;
						margin-left: 4px;
						font-size: 12px;
					}
				}
			}

			.top_btn_box_right {
				width: 28%;
				background-color: #f6f6f6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 10px;
				color: #767676;
				border-radius: 6px;
			}
		}
	}
</style>
